import { Component } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import { initModelValue, renderForm, type FormModalDto } from '@/components/modal/Modal'
import { getKeyToEnum, ProductTypeCnEnum } from '@/const/enum'
import { VxeColumn, VxeTable, type VxeColumnSlots, type VxeTableDataRow, type VxeTableProps, type VxeTablePropTypes } from 'vxe-table'
import Upload from '@/components/file/Upload'
import InputList from '@/components/low-code/components/InputList'
import { Button, Form, FormItem, Select, TimePicker } from 'ant-design-vue'
import { PlusOutlined } from '@ant-design/icons-vue'
import { h } from 'vue'
interface EmailRuleDto {
    template: string[]
    title: string
    content: string
    address: string[]
}

@Component
export class EmailRule extends Render {

    tableData = [
        {
            template: [],
            title: '1',
            content: '',
            address: ['']
        }
    ] as EmailRuleDto[]

    editConfig = {
        mode: 'row',
        trigger: 'click'
    } as VxeTablePropTypes.EditConfig

    uploadPrams = {
        accept: '.xlsx,.xls',
        autoUpload: false,
        limit: 1,
    }

    inputListParams = {
        name: '',
        element: '',
        type: 'singly'
    }

    addressList = ['']

    onAddRule() {
        this.tableData.push({
            template: [],
            title: '',
            content: '',
            address: ['']
        })
    }

    render() {
        console.log(10000, this.tableData)
        return <>
            <Form class="w-full">
                <FormItem label="excel规则" name="ruleName">
                    <Select>
                        {/* <ElOption label="单个表单" value="1"></ElOption>
                        <ElOption label="sheet区分" value="2"></ElOption>
                        <ElOption label="分开发送" value="3"></ElOption>
                        <ElOption label="标准" value="4"></ElOption> */}
                    </Select>
                </FormItem>
                <FormItem label="发送规则" name="ruleName">
                    <div class="w-full">
                        <VxeTable data={this.tableData} border editConfig={this.editConfig}>
                            <VxeColumn type="seq" width={60} ></VxeColumn>
                            <VxeColumn title="邮件模板" field="template" v-slots={{
                                default: ({row}: VxeTableDataRow) => {
                                    return <></>
                                    // <Upload v-model={row.template} listType='text' multiple={false} params={this.uploadPrams} v-slots={{
                                    //     default: () => {
                                    //         return <Button size="small">选择文件</Button>
                                    //     }
                                    // }}>
                                    // </Upload>
                                }
                            }}>
                            </VxeColumn>
                            <VxeColumn title="邮箱标题" field="title" editRender={{name: 'input'}}></VxeColumn>
                            <VxeColumn title="邮箱正文" field="content" editRender={{name: 'input'}}></VxeColumn>
                            <VxeColumn title="邮箱地址" field="address" v-slots={{
                                default: ({row}: VxeTableDataRow) => {
                                    return <InputList v-model={row.address}></InputList>
                                }
                            }}>
                            </VxeColumn>
                        </VxeTable>
                        <Button icon={h(PlusOutlined)} class="w-full mt-10px" onClick={this.onAddRule}>添加</Button>
                    </div>
                </FormItem>
                <FormItem label="客户清单" name="ruleName">
                    <div>
                        <div class="flex flex-wrap mb-20px">
                            <Select class="!w-120px pr-5px">
                                {/* <ElOption label="需要" value="1"></ElOption>
                                <ElOption label="sheet区分" value="2"></ElOption> */}
                            </Select>
                            <span>发送新增客户清单，每天</span>
                            <TimePicker class="!w-120px px-5px"></TimePicker>
                            <span>发送；</span>
                        </div>
                        <Form>
                            <FormItem required label="邮箱地址" name="ruleName">
                                <InputList v-model={this.addressList}></InputList>
                            </FormItem>
                        </Form>
                        <span class="text-sm text-black-300">最多可添加10个邮箱地址</span>
                    </div>
                </FormItem>
            </Form>
            
        </> 
    }

}

export default toNative<{}, {}>(EmailRule)